<template>
   <div class="topLeft flex-box">
    <el-icon class="icon">
        <DArrowRight @click="openMenu" size="40px"></DArrowRight>
    </el-icon>
   </div>
   <div class="topRight">
    <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar :size="30" :src="avatarUrl" />
      <span>admin</span>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
   </div>
</template>

<script setup>
import { defineProps } from 'vue';
let avatarUrl="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
const props=defineProps(['left','right'])
const openMenu=()=>{
    props.left.style.width="10px";
    props.right.style.width="var(100vw - 10px)";
    console.log(props.left)
    console.log(props.right)
}
</script>

<style lang="less" scoped>
.flex-box{
    display: flex;
    align-items: center;
}
.topLeft{
    flex:4;
    text-align: left;
    height: 100%;
    .icon{
        width: 45px;
        height: 100%;
    }
    .icon:hover{
        background-color: #f5f5f5;
    }
}
.topRight{
    flex:1;
    text-align: right;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>